<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/003main.css">
    <title>Document</title>
    <script type="text/javascript">
        /*
        请写出代码，实现：
        1、点击“弹出弹框按钮”显示弹框
		2、弹框显示后，实现秒数的倒计时，秒数为0时自动隐藏弹框
		3、倒计时过程中点击“X”按钮可以隐藏弹框
        */
        window.onload=function(){
            // 获取按钮对象
            var oBtn=document.getElementById("btn01");
            // 获取提示框对象
            var oPop=document.getElementById("pop");
            // 获取倒计时对象
            var oCount=document.getElementById("count");
            // 获取关闭窗口对象
            var oShutoff=document.getElementById("shutoff");
            // 点击按钮弹出提示框
            oBtn.onclick=function(){
                oPop.style.display="block";
                // 设置1s定时
                var oTimer=setInterval(update,1000);
                // 点击关闭窗口对象，窗口隐藏
                oShutoff.onclick=function(){
                    // 清除定时器
                    clearInterval(oTimer);
                    oPop.style.display="";
                }
                // 倒计时
                function update(){
                    // 如果计数值为0，则隐藏提示框
                    if(oCount.innerText==0){
                        // 清除定时器
                        clearInterval(oTimer);
                        // 恢复计数值
                        oCount.innerText="5";
                        oPop.style.display="";
                    }
                    else{
                        oCount.innerText-=1;
                    }
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" value="弹出弹框" id="btn01">
    <div class="pop_main" id="pop">
        <div class="pop_con">
            <div class="pop_title">
                <h3>系统提示</h3>
                <a href="#" id="shutoff">×</a>
            </div>
            <div class="pop_detail">
                <p class="pop_text">亲！请关注近期的优惠活动！</p>
            </div>
            <div class="pop_footer">
                还有<span id="count">5</span>秒自动关闭弹框               
            </div>
        </div>
        <div class="mask"></div>
    </div>
</body>
</html>